<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>权限 | 在线文档</title>
    <meta name="description" content=" ">
    <link rel="stylesheet" href="/onlinedocx/assets/style.35b0e7b5.css">
    <link rel="modulepreload" href="/onlinedocx/assets/Home.57e6b460.js">
    <link rel="modulepreload" href="/onlinedocx/assets/app.a6a2ebb4.js">
    <link rel="modulepreload" href="/onlinedocx/assets/guide_auth.md.d7b4a528.lean.js">
    <link rel="modulepreload" href="/onlinedocx/assets/app.a6a2ebb4.js">
    <meta name="author" content="Archer">
    <meta name="keywords" content="vue-element-plus-admin, vitejs, vite, element-plus, vue">
    <link rel="icon" type="image/x-icon" href="/logo.png">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="online-doc">
    <link rel="icon" href="/logo.png">
    <meta name="twitter:title" content="权限 | 在线文档">
    <meta property="og:title" content="权限 | 在线文档">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-23ef83fe><div class="sidebar-button" data-v-23ef83fe><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/onlinedocx/" aria-label="在线文档, back to home" data-v-23ef83fe data-v-dc837cb8><img class="logo" src="/onlinedocx/logo.png" alt="Logo" data-v-dc837cb8> 在线文档</a><div class="flex-grow" data-v-23ef83fe></div><div class="nav" data-v-23ef83fe><nav class="nav-links" data-v-23ef83fe data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/guide/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>指南</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/dep/i18n" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>深入</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction_com" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>全局组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>功能组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/image-viewer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>函数式组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>示例</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mainapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>主系统</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mapapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统一</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/demoapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统二</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-48f23096><a class="item" href="/onlinedocx/hooks/introduction" data-v-48f23096>常用Hooks <!----></a></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://m608-preview.gitee.io/onlinedocx/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>在线预览</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://gitee.com/mzy_sw/onlineDoc.git" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球在线文档源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://localhost:3000/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>版本更新日志</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-23ef83fe><div class="item" data-v-23ef83fe><button class="nav-btn" aria-label="Toggle Theme" data-v-23ef83fe><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-23ef83fe><a class="nav-btn" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" aria-label="View GitHub Repo" data-v-23ef83fe><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-23ef83fe><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/guide/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>指南</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/dep/i18n" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>深入</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction_com" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>全局组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>功能组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/image-viewer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>函数式组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>示例</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mainapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>主系统</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mapapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统一</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/demoapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统二</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-48f23096><a class="item" href="/onlinedocx/hooks/introduction" data-v-48f23096>常用Hooks <!----></a></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://m608-preview.gitee.io/onlinedocx/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>在线预览</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://gitee.com/mzy_sw/onlineDoc.git" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球在线文档源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://localhost:3000/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>版本更新日志</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/introduction">介绍</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/">开始</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/settings">项目配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/router">路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/component">组件注册</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/design">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/deploy">构建</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">开发</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/specification">开发指南</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">可视化</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/visualization/index">可视化</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">深入</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/i18n">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/lint">项目规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/theme">主题设置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/ssr">SSR</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/fqa">常见问题</a><!----></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><h1 id="权限"><a class="header-anchor" href="#权限" aria-hidden="true">#</a> 权限</h1><p>项目中集成了 2 种权限处理方式：</p><ol><li>第一种是由前端来控制菜单，即服务端只返回有权限的 keys，由前端自行去匹配</li><li>第二种是通过服务端返回的路由数据结构来动态生成路由表</li></ol><p>目前项目中提供了测试的帐号：</p><p><strong>admin/admin</strong></p><h2 id="前端控制权限"><a class="header-anchor" href="#前端控制权限" aria-hidden="true">#</a> 前端控制权限</h2><p><strong>实现原理：</strong> 在前端固定写死路由的权限，指定路由有哪些权限可以查看。只初始化通用的路由，需要权限才能访问的路由没有被加入路由表内。在登陆后或者其他方式获取对应的路由 keys 后，遍历路由表去匹配 keys，过滤生成可以访问的路由表，再通过 <code>router.addRoutes</code> 添加到路由实例，实现权限的过滤。</p><p><strong>缺点：</strong> 权限相对不自由，因为路由表的控制在前端，不管是要排序还是修改，都需要前端去修改，服务端只提供有权限的路由 keys</p><h2 id="后台动态获取"><a class="header-anchor" href="#后台动态获取" aria-hidden="true">#</a> 后台动态获取</h2><p><strong>实现原理：</strong> 是通过接口动态生成路由表，且遵循一定的数据结构返回。前端根据需要处理该数据为可识别的结构，再通过 <code>router.addRoutes</code> 添加到路由实例，实现权限的动态生成。</p><p><strong>优点：</strong> 所有的菜单控制都是通过服务端的接口返回，前端只负责渲染，后期维护成本降低，优先推荐此方式。</p><h2 id="实现"><a class="header-anchor" href="#实现" aria-hidden="true">#</a> 实现</h2><ol><li>在<a href="https://gitee.com/mzy_sw/onlineDoc.git/blob/master/src/store/modules/permission.ts" target="_blank" rel="noopener noreferrer">src/store/modules/permission.ts</a> 中 <code>generateRoutes()</code> 进行更改。</li></ol><p>接收的 <code>type</code> 参数，目前只是针对于本项目的模拟情况，如果不需要或者不适用，可自行改动。</p><div class="language-ts"><pre><code><span class="token function">generateRoutes</span><span class="token punctuation">(</span>
  type<span class="token operator">:</span> <span class="token string">&#39;server&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;frontEnd&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;static&#39;</span><span class="token punctuation">,</span>
  routers<span class="token operator">?</span><span class="token operator">:</span> AppCustomRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
<span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token builtin">unknown</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name"><span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token keyword">void</span><span class="token operator">&gt;</span></span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> routerMap<span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">&#39;server&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 模拟后端过滤菜单</span>
      routerMap <span class="token operator">=</span> <span class="token function">generateRoutesByServer</span><span class="token punctuation">(</span>routers <span class="token keyword">as</span> AppCustomRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">&#39;frontEnd&#39;</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 模拟前端过滤菜单</span>
      routerMap <span class="token operator">=</span> <span class="token function">generateRoutesByFrontEnd</span><span class="token punctuation">(</span><span class="token function">cloneDeep</span><span class="token punctuation">(</span>asyncRouterMap<span class="token punctuation">)</span><span class="token punctuation">,</span> routers <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// 直接读取静态路由表</span>
      routerMap <span class="token operator">=</span> <span class="token function">cloneDeep</span><span class="token punctuation">(</span>asyncRouterMap<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// 动态路由，404一定要放到最后面</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>addRouters <span class="token operator">=</span> routerMap<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        path<span class="token operator">:</span> <span class="token string">&#39;/:path(.*)*&#39;</span><span class="token punctuation">,</span>
        redirect<span class="token operator">:</span> <span class="token string">&#39;/404&#39;</span><span class="token punctuation">,</span>
        name<span class="token operator">:</span> <span class="token string">&#39;404Page&#39;</span><span class="token punctuation">,</span>
        meta<span class="token operator">:</span> <span class="token punctuation">{</span>
          hidden<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          breadcrumb<span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token comment">// 渲染菜单的所有路由</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>routers <span class="token operator">=</span> <span class="token function">cloneDeep</span><span class="token punctuation">(</span>constantRouterMap<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>routerMap<span class="token punctuation">)</span>
    <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="前端控制实现"><a class="header-anchor" href="#前端控制实现" aria-hidden="true">#</a> 前端控制实现</h3><ol start="2"><li>在<a href="https://gitee.com/mzy_sw/onlineDoc.git/blob/master/src/utils/routerHelper.ts" target="_blank" rel="noopener noreferrer">src/utils/routerHelper.ts</a> 中 <code>generateRoutesByFrontEnd ()</code> 进行更改。目前本项目的前端权限控制，是根据 <code>path</code> 是否相同来进行过滤演示的，如果不符合需求，需要手动更改以下判断逻辑。</li></ol><div class="language-ts"><pre><code><span class="token comment">// 前端控制路由生成</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> generateRoutesByFrontEnd  <span class="token operator">=</span> <span class="token punctuation">(</span>
  routes<span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  keys<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  basePath <span class="token operator">=</span> <span class="token string">&#39;/&#39;</span>
<span class="token punctuation">)</span><span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> res<span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> route <span class="token keyword">of</span> routes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> meta <span class="token operator">=</span> route<span class="token punctuation">.</span>meta <span class="token keyword">as</span> RouteMeta<span class="token punctuation">;</span>
    <span class="token comment">// skip some route</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>meta<span class="token punctuation">.</span>hidden <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>meta<span class="token punctuation">.</span>showMainRoute<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">continue</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">let</span> data<span class="token operator">:</span> Nullable<span class="token operator">&lt;</span>AppRouteRecordRaw<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>

    <span class="token keyword">let</span> onlyOneChild<span class="token operator">:</span> Nullable<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children <span class="token operator">&amp;&amp;</span> route<span class="token punctuation">.</span>children<span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">1</span> <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>meta<span class="token punctuation">.</span>alwaysShow<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      onlyOneChild <span class="token operator">=</span> <span class="token punctuation">(</span>
        <span class="token function">isUrl</span><span class="token punctuation">(</span>route<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>path<span class="token punctuation">)</span>
          <span class="token operator">?</span> route<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>path
          <span class="token operator">:</span> <span class="token function">pathResolve</span><span class="token punctuation">(</span><span class="token function">pathResolve</span><span class="token punctuation">(</span>basePath<span class="token punctuation">,</span> route<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">,</span> route<span class="token punctuation">.</span>children<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>path<span class="token punctuation">)</span>
      <span class="token punctuation">)</span> <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// 开发者可以根据实际情况进行扩展</span>
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> item <span class="token keyword">of</span> keys<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 通过路径去匹配</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">isUrl</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>onlyOneChild <span class="token operator">===</span> item <span class="token operator">||</span> route<span class="token punctuation">.</span>path <span class="token operator">===</span> item<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        data <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> route<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> routePath <span class="token operator">=</span> <span class="token function">pathResolve</span><span class="token punctuation">(</span>basePath<span class="token punctuation">,</span> onlyOneChild <span class="token operator">||</span> route<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>routePath <span class="token operator">===</span> item <span class="token operator">||</span> meta<span class="token punctuation">.</span>followRoute <span class="token operator">===</span> item<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          data <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> route<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token comment">// recursive child routes</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children <span class="token operator">&amp;&amp;</span> data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token function">generateRoutesByFrontEnd</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children<span class="token punctuation">,</span> keys<span class="token punctuation">,</span> <span class="token function">pathResolve</span><span class="token punctuation">(</span>basePath<span class="token punctuation">,</span> data<span class="token punctuation">.</span>path<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data <span class="token keyword">as</span> AppRouteRecordRaw<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="后台动态获取-1"><a class="header-anchor" href="#后台动态获取-1" aria-hidden="true">#</a> 后台动态获取</h3><ol start="3"><li>在<a href="https://gitee.com/mzy_sw/onlineDoc.git/blob/master/src/utils/routerHelper.ts" target="_blank" rel="noopener noreferrer">src/utils/routerHelper.ts</a> 中 <code>generateRoutesByServer ()</code> 进行更改。</li></ol><div class="language-ts"><pre><code><span class="token comment">// 后端控制路由生成</span>
<span class="token keyword">export</span> <span class="token keyword">const</span> generateRoutesByServer  <span class="token operator">=</span> <span class="token punctuation">(</span>routes<span class="token operator">:</span> AppCustomRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> res<span class="token operator">:</span> AppRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> route <span class="token keyword">of</span> routes<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> data<span class="token operator">:</span> AppRouteRecordRaw <span class="token operator">=</span> <span class="token punctuation">{</span>
      path<span class="token operator">:</span> route<span class="token punctuation">.</span>path<span class="token punctuation">,</span>
      name<span class="token operator">:</span> route<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
      redirect<span class="token operator">:</span> route<span class="token punctuation">.</span>redirect<span class="token punctuation">,</span>
      meta<span class="token operator">:</span> route<span class="token punctuation">.</span>meta<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>component<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> comModule <span class="token operator">=</span>
        modules<span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">../</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.vue</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span> <span class="token operator">||</span> modules<span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">../</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.tsx</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">;</span>
      <span class="token keyword">const</span> component <span class="token operator">=</span> route<span class="token punctuation">.</span>component <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>comModule <span class="token operator">&amp;&amp;</span> <span class="token operator">!</span>component<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;#&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">未找到</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.vue文件或</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>route<span class="token punctuation">.</span>component<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.tsx文件，请创建</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token comment">// 动态加载路由文件，可根据实际情况进行自定义逻辑</span>
        data<span class="token punctuation">.</span>component <span class="token operator">=</span>
          component <span class="token operator">===</span> <span class="token string">&#39;#&#39;</span> <span class="token operator">?</span> Layout <span class="token operator">:</span> component<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">&#39;##&#39;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">getParentLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">:</span> comModule<span class="token punctuation">;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// recursive child routes</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      data<span class="token punctuation">.</span>children <span class="token operator">=</span> <span class="token function">generateRoutesByServer</span> <span class="token punctuation">(</span>route<span class="token punctuation">.</span>children<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>data <span class="token keyword">as</span> AppRouteRecordRaw<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="公用部分修改"><a class="header-anchor" href="#公用部分修改" aria-hidden="true">#</a> 公用部分修改</h3><ol start="4"><li>在<a href="https://gitee.com/mzy_sw/onlineDoc.git/blob/master/src/views/Login/components/LoginForm.vue" target="_blank" rel="noopener noreferrer">src/views/Login/components/LoginForm.vue</a> 中 <code>getRole()</code> 进行更改。</li></ol><p>需要开发者自行根据需求进行代码变更。</p><div class="language-ts"><pre><code><span class="token comment">// 获取角色信息</span>
<span class="token keyword">const</span> <span class="token function-variable function">getRole</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> formData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token generic-function"><span class="token function">getFormData</span><span class="token generic class-name"><span class="token operator">&lt;</span>UserType<span class="token operator">&gt;</span></span></span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">const</span> params <span class="token operator">=</span> <span class="token punctuation">{</span>
    roleName<span class="token operator">:</span> formData<span class="token punctuation">.</span>username
  <span class="token punctuation">}</span>
  <span class="token keyword">const</span> res <span class="token operator">=</span>
    appStore<span class="token punctuation">.</span>getDynamicRouter <span class="token operator">&amp;&amp;</span> appStore<span class="token punctuation">.</span>getServerDynamicRouter
      <span class="token operator">?</span> <span class="token keyword">await</span> <span class="token function">getAdminRoleApi</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span>
      <span class="token operator">:</span> <span class="token keyword">await</span> <span class="token function">getTestRoleApi</span><span class="token punctuation">(</span>params<span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> routers <span class="token operator">=</span> res<span class="token punctuation">.</span>data <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token function">setStorage</span><span class="token punctuation">(</span><span class="token string">&#39;roleRouters&#39;</span><span class="token punctuation">,</span> routers<span class="token punctuation">)</span>
    appStore<span class="token punctuation">.</span>getDynamicRouter <span class="token operator">&amp;&amp;</span> appStore<span class="token punctuation">.</span>getServerDynamicRouter
      <span class="token operator">?</span> <span class="token keyword">await</span> permissionStore<span class="token punctuation">.</span><span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token string">&#39;server&#39;</span><span class="token punctuation">,</span> routers<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token operator">:</span> <span class="token keyword">await</span> permissionStore<span class="token punctuation">.</span><span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token string">&#39;frontEnd&#39;</span><span class="token punctuation">,</span> routers<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

    permissionStore<span class="token punctuation">.</span>getAddRouters<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">addRoute</span><span class="token punctuation">(</span>route <span class="token keyword">as</span> RouteRecordRaw<span class="token punctuation">)</span> <span class="token comment">// 动态添加可访问路由表</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    permissionStore<span class="token punctuation">.</span><span class="token function">setIsAddRouters</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
    <span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> redirect<span class="token punctuation">.</span>value <span class="token operator">||</span> permissionStore<span class="token punctuation">.</span>addRouters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span>path <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><ol start="5"><li>在<a href="https://gitee.com/mzy_sw/onlineDoc.git/blob/master/src/permission.ts" target="_blank" rel="noopener noreferrer">src/permission.ts</a>，以下这种情况，是考虑到手动刷新，所以需要获取到缓存中的动态菜单重新渲染。</li></ol><div class="language-ts"><pre><code><span class="token comment">// 开发者可根据实际情况进行修改</span>
<span class="token keyword">const</span> roleRouters <span class="token operator">=</span> <span class="token function">getStorage</span><span class="token punctuation">(</span><span class="token string">&#39;roleRouters&#39;</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>

<span class="token comment">// 是否使用动态路由</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>appStore<span class="token punctuation">.</span>getDynamicRouter<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  appStore<span class="token punctuation">.</span>serverDynamicRouter
    <span class="token operator">?</span> <span class="token keyword">await</span> permissionStore<span class="token punctuation">.</span><span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token string">&#39;server&#39;</span><span class="token punctuation">,</span> roleRouters <span class="token keyword">as</span> AppCustomRouteRecordRaw<span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token operator">:</span> <span class="token keyword">await</span> permissionStore<span class="token punctuation">.</span><span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token string">&#39;frontEnd&#39;</span><span class="token punctuation">,</span> roleRouters <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  <span class="token keyword">await</span> permissionStore<span class="token punctuation">.</span><span class="token function">generateRoutes</span><span class="token punctuation">(</span><span class="token string">&#39;static&#39;</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

permissionStore<span class="token punctuation">.</span>getAddRouters<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>route<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  router<span class="token punctuation">.</span><span class="token function">addRoute</span><span class="token punctuation">(</span>route <span class="token keyword">as</span> <span class="token builtin">unknown</span> <span class="token keyword">as</span> RouteRecordRaw<span class="token punctuation">)</span> <span class="token comment">// 动态添加可访问路由表</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> redirectPath <span class="token operator">=</span> from<span class="token punctuation">.</span>query<span class="token punctuation">.</span>redirect <span class="token operator">||</span> to<span class="token punctuation">.</span>path
<span class="token keyword">const</span> redirect <span class="token operator">=</span> <span class="token function">decodeURIComponent</span><span class="token punctuation">(</span>redirectPath <span class="token keyword">as</span> <span class="token builtin">string</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> nextData <span class="token operator">=</span> to<span class="token punctuation">.</span>path <span class="token operator">===</span> redirect <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token operator">...</span>to<span class="token punctuation">,</span> replace<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token punctuation">{</span> path<span class="token operator">:</span> redirect <span class="token punctuation">}</span>
permissionStore<span class="token punctuation">.</span><span class="token function">setIsAddRouters</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span>
<span class="token function">next</span><span class="token punctuation">(</span>nextData<span class="token punctuation">)</span>
</code></pre></div><h2 id="静态路由（无权限）"><a class="header-anchor" href="#静态路由（无权限）" aria-hidden="true">#</a> 静态路由（无权限）</h2><p>有时候，我们并不需要动态路由，那么可以在 <code>src/config/app.ts</code> 中把 <code>dynamicRouter</code> 设置为 <code>false</code>，这样我们取得都是项目中的静态路由表了。</p><p>内部逻辑已经处理了静态路由的部分，所以可以无需关心其他。</p></div></div><footer class="page-footer" data-v-4c107763 data-v-126fe9ba><div class="updated" data-v-126fe9ba><!----></div></footer><!----><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"6cb2edcd\",\"readme.md\":\"2102e4ff\",\"components_demoapp.md\":\"fa6343ea\",\"components_introduction.md\":\"d8d460b8\",\"components_introduction_com.md\":\"9951ea9d\",\"components_mainapp.md\":\"ae0d2342\",\"components_mapapp.md\":\"a505b547\",\"components_piebutton.md\":\"883f5dc7\",\"components_piemodal.md\":\"4eb4a4d2\",\"components_piepage.md\":\"5f1eb831\",\"components_piepanel.md\":\"7168684d\",\"components_pieswitchlang.md\":\"ce7ac1ed\",\"components_pietable.md\":\"04661233\",\"components_sticky.md\":\"0df4d142\",\"dep_dark.md\":\"4e86f7fe\",\"dep_i18n.md\":\"eb35758e\",\"dep_lint.md\":\"ca871644\",\"dep_ssr.md\":\"b2dfe318\",\"dep_theme.md\":\"71bfaf39\",\"guide_auth.md\":\"d7b4a528\",\"guide_component.md\":\"b984b86d\",\"guide_deploy.md\":\"37e87483\",\"guide_design.md\":\"855d9149\",\"guide_fqa.md\":\"ac88244b\",\"guide_index.md\":\"2b07d676\",\"guide_introduction.md\":\"3fa71234\",\"guide_maindoc.md\":\"48309c5d\",\"guide_router.md\":\"ae436954\",\"guide_settings.md\":\"4748e13a\",\"guide_specification.md\":\"f1f55221\",\"guide_version.md\":\"7b201b4e\",\"hooks_introduction.md\":\"31936081\",\"hooks_useclipboard.md\":\"e9631906\",\"hooks_usecrudschemas.md\":\"3a0e4601\",\"hooks_usenetwork.md\":\"a7397dc9\",\"hooks_usestorage.md\":\"e3909a5f\",\"hooks_usetagsview.md\":\"4269b6f2\",\"hooks_usewatermark.md\":\"5bc7cf84\",\"visualization_index.md\":\"825518c0\"}")</script>
    <script type="module" async src="/onlinedocx/assets/app.a6a2ebb4.js"></script>
  </body>
</html>